<template>
	<div id="app">
		<div class="app-header">
			<img class="app-header-logo" src="./assets/logo.png" />
			<ul class="app-header-navigate">
				<li>
					<router-link to="/home">首页</router-link>
				</li>
				<li>
					<router-link to="/magazine">杂志</router-link>
				</li>
				<li>
					<router-link to="/subscribers">订阅</router-link>
				</li>
				<li>
					<router-link to="/about">关于</router-link>
				</li>
			</ul>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name: 'app',

	}
</script>

<style>
	body{
		margin: 0;
	}
    #app{
		margin: 0;
	}
	.app-header {
		top: 0;
		left: 0;
		width: 100vw;
		height: 85px;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		box-shadow: 0 0.1px 0.5px 0.5px gray;
		z-index: 1000;
		margin: 0;
		
	}

	.app-header-logo {
		width: 125px;
		height: 35px;
		margin-left: 10vw;
	}

	.app-header-navigate {
		padding: 0;
		list-style: none;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 35vw;
		height: 75px;
		margin: 0;
		margin-right: 10vw;
	}
	.app-header-navigate>li{
		
	}
	.app-header-navigate>li>a{
		text-decoration: none;
		line-height: 50px;
		display: block;
		color: #2C3E50;
	}
	
	.router-link-active{
		color: #1FAF88 !important;
		border-bottom: 3px solid #1FAF88;
	}
</style>
